/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../../../styles/variables.scss";

$border-color: $grey-05;
$input-box-focus-color: #66afe9;
$input-label-color: $grey-03;
$action-button-color: $grey-02;
$regular-font: 14px;
$key-value-pair-input-height: 32px;
$key-value-pair-margin: 16px;
$key-value-pair-visible-number: 6;

#runtime-arguments-key-value-pairs-wrapper {
  margin-top: 20px;
  .step-content-heading {
    .step-content-subtitle {
      font-weight: initial;
      font-size: 12px;
    }
  }
  .runtime-arguments-labels {
    background-color: $grey-07;
    width: 100%;
    padding: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr 62px;
    grid-gap: 10px;
    margin-right: -25px;

    &.wider {
      grid-template-columns: 1.5fr 1.5fr auto 100px;
    }

    .provided-label {
      width: initial;
    }

    .provided-popover {
      display: inline-block;
      cursor: pointer;
      margin-right: 5px;

      .icon-caret-square-o-down {
        margin-left: 5px;
        transform: translateY(-1px);
      }

      .popper {
        min-width: 90px;
        width: 90px;
      }
    }
  }

  .runtime-arguments-values {
    /*
      192px = 32px (height of input box) * 4
             + 16px (margin between each boxes) * 4
      Extra +1 is to have half of the last element visible so that the user
      will know that they need to scroll to find new run time args.
    */
    max-height: calc(#{$key-value-pair-input-height} * #{$key-value-pair-visible-number} + (#{$key-value-pair-margin} * #{$key-value-pair-visible-number + 1}));
    overflow-x: hidden;
    overflow-y: auto;

  }
  .key-value-pair-labels {
    .key-label,
    .value-label,
    .provided-label {
      display: inline-block;
      color: $input-label-color;
      width: 100%;
      font-weight: 800;
    }

    .key-label {
      margin-right: 22px;
    }
  }

  .key-value-pair-values {

    // This is incorrect. We shouldn't be modifying the style outside of the component
    // in all the places. It becomes unmanageable to reuse/recycle the component.
    .key-value-pair-preference {
      margin-bottom: 15px;
      justify-content: initial;
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      grid-gap: 10px;

      input[type="checkbox"] {
        width: 12px;
        height: 12px;
        display: inline-block;
        margin: 0 16px 0 8px;
      }

      .btn-link {
        padding: 6px 8px;
      }

      input[type="text"] {
        border: 1px solid $border-color;
        border-radius: 0.25rem;
        font-size: $regular-font;
        width: 100%;

        &:focus {
          border-color: $input-box-focus-color;
        }
      }

      .btn-link {
        color: $action-button-color;
        font-size: $regular-font;
        padding: 6px 10px;
      }
    }
  }
}
